function getSideColorName(side) 
{
	return (side == Side.RED) ? 'red' : ((side==Side.BLUE) ? 'blue' : 'neutral');
}

function HierarkiaStats(doc, ui)
{
    this.element = doc.createElement("div");
    this.element.className = "statistics-container";
	this.statistics = doc.createElement("span");
	this.statistics.className = "statistics-waiting";
	this.statistics.innerText = "Waiting...";
	this.element.appendChild(this.statistics);

    function makeHierarkiaStats(doc, game, fsm)
    {
        var stats = doc.createElement('div');
        stats.className = 'statistics';

        var header = doc.createElement('div');
        header.className = 'stats-header';
        stats.appendChild(header);        

        var headerlab = doc.createElement('span');
        headerlab.className = 'headerlab';
        headerlab.innerText = "Statistics"
        var turnlab = doc.createElement('span');
        turnlab.className = 'turnlab';
        turnlab.innerText = "Turn: "
        var turn = doc.createElement('span');
        turn.className = 'turn';
        turn.innerText = game.currentTurn();
        header.appendChild(headerlab);
        header.appendChild(turnlab);
        header.appendChild(turn);

        var playerstats = doc.createElement('div');
        playerstats.className = 'playerstats';
        stats.appendChild(playerstats);

        for(pi = 0; pi < 2; pi++) /* iterate players */
        {
            var playerdiv = doc.createElement('div');
            playerdiv.className = 'playerstats-' + getSideColorName(pi);
            playerstats.appendChild(playerdiv);

            var playername = doc.createElement('span');
            playername.innerText = game.players[pi];
            playerdiv.appendChild(playername);        

            var table = doc.createElement('table');
            playerdiv.appendChild(table);

            var playerpieces = game.hierarkia().sidePieces(pi);

            for(var i = 1; i <= game.info.pieces; i++)
            {
                var tr = doc.createElement('tr');
                table.appendChild(tr);

                var n = playerpieces.filter(function (p) { return (p.value == i) ? true : false; });
                for(var j = 0; j < game.info.pieces+1-i; j++)
                {
                    var piece = doc.createElement('td');
                    piece.className = 'piece'
                    piece.setAttribute('color', getSideColorName(pi));
                    if(j < n.length)
                    {
                        piece.innerText = i;
                    } else { //piece dead
                        piece.innerText = "x";
                        piece.setAttribute('dead', true);
                    }
                    tr.appendChild(piece); 
                }
            }
        }
        return stats;
    }

    this.updateCurrentGame = function(player, game, fsm)
    {
		var stats = makeHierarkiaStats(this.element.ownerDocument, game, fsm);
		this.element.removeChild(this.statistics);
		this.statistics = stats;
		this.element.appendChild(this.statistics);
    }
    
    this.updateGamesList = function(player, currentGameId, games) {}
}
